<h3><?php echo $this->getTitle(); ?></h3>

<div style="width:600;height:300">

<div style="float: left; padding-left: 5px; width:600; height:300;" width="600" height="300"><canvas id="<?php echo $this->getId(); ?>" width="600" height="300"></canvas>&nbsp;</div>
<div style="clear: both; height: 600px; width: 300px;">&nbsp</div>
</div>
 
 <script type="text/javascript">

var dataset<?php echo $this->getId(); ?> = {

<?php
$array=array();
foreach ($this->getDataSets() as $title=> $dataSet) {
    $array[] = "'".$title."':[".$this->getDataSet($dataSet)."]";
}
echo implode(",\n", $array);
?>

};

var options<?php echo $this->getId(); ?> = {
	
	// Define a padding for the canvas node
	padding: {
		left: 30, 
		right: 0, 
		top: 10, 
		bottom: 30
	},
	// Background color to render.
	background: {
		color: '<?php echo $this->getBgColor(); ?>'
	},
	shouldFill: false,	
	// Use the predefined blue colorscheme.
	colorScheme: '<?php echo $this->getColorScheme(); ?>',
	<?php
	/**
	if (count($this->_customColors)>0) {
	    
	    ?>
	    colorScheme: [ 
	        <?php echo "'" . implode("','", $this->_customColors) . "'"; ?>
	    ],
	    <?
	}
	*/
	?>
	axis: {
		// The fontcolor of the labels is black.
		labelColor: '<?php echo $this->getLabelColor(); ?>',
		// Add the ticks. Keep in mind, x and y axis are swapped
		// when the BarOrientation is horizontal.
		x: {
			ticks: [<?php echo $this->getXAxis(); ?>]
		}
		
	}
	,
	// Set the legend position.
	legend: {
		position:{
			left: '-2420px'	
		}	,
		visible: false
	}
};
function drawGraph<?php echo $this->getId(); ?>() {

    var layout = new Plotr.LineChart('<?php echo $this->getId(); ?>', options<?php echo $this->getId(); ?>);
    layout.addDataset(dataset<?php echo $this->getId(); ?>);
    //layout.addTable('table<?php echo $this->getId(); ?>',1,1,0);
    layout.render();

}



drawGraph<?php echo $this->getId(); ?>();
</script>